<template>
  <a-space wrap>
    <!-- 16 个 叫 main-1 ~ main-16 的 div -->
    <div
      :id="`main-${i}`"
      style="width: 220px; height: 220px; border: 1px solid black"
      v-for="i in 16"
      :key="i"
    ></div>
  </a-space>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getCpuLoadApi } from "@/api/cpuLoadApi";
import { ref } from "vue";

const cpuAllData = ref([]);
// 保证所有初始化的图表
const chartDom = ref([]);

onMounted(() => {
  // 页面加载出来， 有 div dom 元素才可以。
  // 初始化图表只需进行一次
  initChart();
  // 以后每次画图
  getCpuData();
});

const initChart = () => {
  for (let i = 1; i <= 16; i++) {
    // 得到一个 chart 对象
    var dom = document.getElementById(`main-${i}`);
    var myChart = echarts.init(dom);
    chartDom.value.push(myChart);
  }
};

const getCpuData = async () => {
  // 1. 拿到服务器数据的响应
  // 2. 返回16核CPU。每个核心当前的负载值
  const resp = await getCpuLoadApi();
  for (let i = 0; i < 16; i++) {
    // 把当前请求到的这个CPU的使用率放进自己的数组中，第一次要初始化数组
    if (!cpuAllData.value[i]) {
      cpuAllData.value[i] = [];
    }
    if (cpuAllData.value[i].length > 10) {
      // 把最老的一个数据删除，放入最新获取的这个数据
      let arr = cpuAllData.value[i].slice(-10); // 移除了最前一个元素的数组
      arr.push(resp.data[i]);
      cpuAllData.value[i] = arr;
    } else {
      // 每次给里面放之前给数组的长度进行一个判断
      cpuAllData.value[i].push(resp.data[i]);
    }
    drawCpuLoad(i + 1, cpuAllData.value[i]);
  }
  await getCpuData();
};

// 1. 每个图显示CPU名
// 2. 每个图xy轴不显示
// 3. 显示为面积图
const drawCpuLoad = (cpuIndex, cpuData) => {
  var myChart = chartDom.value[cpuIndex - 1];
  var option;
  option = {
    title: {
      text: "CPU" + cpuIndex,
      textStyle: {
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 5,
      top: 0,
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 1
    },
    series: [
      {
        data: cpuData,
        type: "line",
        symbol: "none",
        smooth: true,
        areaStyle: {},
      },
    ],
  };

  myChart.setOption(option);
};
</script>

<style></style>
